* {
    margin: 0;
    padding: 0;
}
html,body {
    width: 100%;
    height: 100%;
}
body {
    overflow: hidden;
}
input, button, textarea{
    border: 0;
    outline: 0;
    outline-offset: 0;
}
:after,:before {
    box-sizing: border-box;
}
::-webkit-scrollbar {
    width: 2px;
    background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
    background-color: #999;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    -moz-box-shadow:  inset 0 0 6px rgba(0, 0, 0, .3);
    box-shadow:  inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #f5f5f5;
}
::-webkit-scrollbar:window-inactive,::-webkit-scrollbar-track:window-inactive,::-webkit-scrollbar-thumb:window-inactive {
    visibility: hidden;
}


#chat-header {
    position: relative;
    top: 0;
    left: 0;
    padding: 8px 0;
    width: 100%;
    text-align: center;
    font-size: 1em;
    color: #fff;
    background-color: #3097D1;
    background-image: url(../img/header_bg.png);
}
#chat-list {
    position: relative;
    top: 0;
    left: 0;
    max-width: 100%;
    width: 100%;
    height: 86%;
    background: #F1F2F7;
    overflow: scroll;
    overflow-x: hidden;
    overflow-y: scroll;
}
#chat-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%;
    background: #F1F2F7;
}

.chat {
    padding: 15px 0;
    position: relative;
    top: 0;
    left: 0;
}
.chat-img {
    position: absolute;
    top: 25px;
    margin-top: -10px;
    width: 50px;
    height: 50px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    background: #fff;
}
.chat-info {
    font-size: .3em;
}
.chat-s {
    padding: 0 5px;
    color: #fff;
    background: #FF988A;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
.chat-name {
    color: rgb(144,145,149);
}
.chat-sex {
    font-size: 4em;
    font-weight: bold;
}
.chat-sex.male {
    color: #5FD4F2;
}
.chat-sex.female {
    color: #FF758F;
}
.chat-sex.maf {
    color: rgb(205,33,230);
}
.chat-message {
    margin: 5px 70px 0 70px;
    word-wrap:break-word;
    word-break:normal;
    display: inline-block;
    padding: 5px;
    border: 1px solid #fff;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background: #fff;
    box-shadow: 2px 2px 2px 0 rgba(0,0,0,.1);
}
.chat-message:after {
    content: "";
    position: absolute;
    border-bottom: 8px solid rgba(255, 255, 255, 0);
}
.chat-message > img {
    max-width: 100%;
    width: 100%;
}
.chat-me {
    text-align: right;
}
.chat-me > img {
    right: 10px;
}
.chat-me > p:after {
    right: 60px;
    top: 50px;
    border-left: 12px solid #fff;
}
.chat-me > .chat-info {
    margin-right: 70px;
}
.chat-ta {
    text-align: left;
}
.chat-ta > img {
    left: 10px;
}
.chat-ta > p:after {
    left: 60px;
    top: 50px;
    border-right: 12px solid #fff;
}
.chat-ta > .chat-info {
    margin-left: 70px;
}
/* 用户 */
.chat-type-message {

}
/* 系统 */
.chat-type-system {

}
/* 小提示 */
.chat-type-tips {

}
.chat-type-system, .chat-type-tips {
    text-align: center;
    font-size: .5em;
}
.chat-type-system > span {
    display: inline-block;
    padding: 4px;
    color: #ffffff;
    background-color: #cccccc;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
.chat-type-tips > span {
    padding: 2px 8px;
    color: #fff;
    background: #FF0000;
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border-radius: 7px;
}
.chat-input > .message {
    margin: 2px 0 2px 3%;
    padding: 5px 3px;
    width: 80%;
    height: 24px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 3px;
    background: #fff;
}
.chat-input > .message:focus {
    box-shadow: inset 0 0 1px 2px rgba(0,0,0,0.1)
}
.chat-input > .message:active {
    box-shadow: inset 0 0 1px 2px rgba(0,0,0,0.1)
}
.chat-input > .message::-webkit-scrollbar {
    width: 1px;
    background-color: #f5f5f5;
}
.chat-input > .message::-webkit-scrollbar-thumb {
    background-color: #999;
}
.chat-input > .message::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    -moz-box-shadow:  inset 0 0 6px rgba(0, 0, 0, .3);
    box-shadow:  inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #f5f5f5;
}
.chat-input > .btn {
    margin: 1px 1.5% 1px 1.5%;
    width: 12%;
    height: 36px;
    float: right;
    border-radius: 6px;
    color: #fff;
}
.chat-input > .btn.y {
    background: #12B7F5;
}
.chat-input > .btn.n {
    background: #DDDEE2;
}
.chat-more {
    margin: 0 3%;
}
